<template>
  <div class="bg_white">
      <div class="title clearfloat">
          <h2 class="fl">热门文章   </h2>
      </div>
      <ul class="clearfloat">
          <li v-for="article in articles">
              <router-link v-bind:to="'/articleDetail/'+article._id" tag="a">
                <h4>{{article.articleTitle}}</h4>
             </router-link>
              <p class="fl">
                  <i class="iconfont">&#xe6e4;</i>
                  <span>{{article.readers}}</span>
              </p>
              <p class="fr">{{article.createdAt|filterDate}}</p>
          </li>        
      </ul>
  </div>
</template>
<script>
import axios from 'axios'
import dateformat from '../../assets/js/dateformat.js'
export default {
    data (){
        return{
            articles:[]
        }
    },
    created:function(){
        var that = this;
        axios.get('/api/right/getHotarticle').then(function(res){
            that.articles = res.data;
        })
    },
     filters:{
        filterDate:dateformat
    }
}
</script>
<style scoped lang="scss">
  .bg_white{
      padding:16px;
      h2{
          font-size:16px;
          font-weight: normal;
      }
      .title{
          border-bottom:1px solid rgb(236, 236, 236);
          padding-bottom:10px;
          .bule{
              font-size:14px;
          }
      }
      ul{ 
          margin-top:10px;
          li{
              float:left;
              font-size:13px;
              margin-top:10px;
              margin:8px;
              color:rgb(112, 112, 112);
              padding-bottom:10px;
              border-bottom:1px solid #f3f3f3;
                 h4{
                     font-size:15px;
                     width:250px;
                     font-weight: normal;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                 }
                 p{
                     margin-top:12px;
                 }
                 .fr{
                     margin-right:20px;
                 }
          }
          
          
      }
  }  
</style>

